Welcome to Component Designer

This help file contains topics about the Component Designer, a dynamic program that aids you in creating Web components. To learn more about Component Designer and each of the item found within the program, you can navigate through this help file or click an item in the Component Designer program window invoked from the PhotoImpact program then click the Help button.

  What is Component Designer?

  Enabling Component Designer

  The Component Designer Workspace


What is Component Designer?

The Component Designer is a powerful tool that helps you create path- and text-based Web components such as banners, bullets, button, icons, java rollover buttons, and separators. There is a vast array of pre-designed templates that you can choose from and modify at a later date.

When you choose a template, a preview of all the components within each template is displayed on the right pane of the workspace. You can then adjust and modify each individual component. Adjust the size, change the color, apply shadow, or even modify its text, in such cases as banners with text on it. This is particularly useful when you want to place personalized buttons and bars, bullets and banners on your Web site.

After you have finished modifying your component, you have the choice of either sending your image to PhotoImpact for further editing or saving the image via Image Optimizer where you can minimize the file size, thereby, reducing loading time on the Web.

  Welcome to Component Designer

  Enabling Component Designer

  The Component Designer Workspace


Using Component Designer
Enabling Component Designer

You can enable Component Designer from within the PhotoImpact program. However, since Component Designer is a stand-alone program, it continues running even if you quit PhotoImpact.

To enable Component Designer:

1.	From PhotoImpact, click Web: Component Designer.

2.	On the left pane of the Component Designer workspace, you will see seven template groups. Click the plus or minus sign to show or hide the templates within each group.

3.	Choose a template from the list. All the available components are then displayed on the right pane of the workspace.

4.	Select a component.

5.	Click Next. Component Designer allows you to work on the component in the editing area. You can adjust the size of the component (and the text, too, if there is any on the component), change the color, or even apply shadow to it.

6.	After you have finished modifying the selected component, click Export.

7.	Choose between To PhotoImpact and To Image Optimizer (and To HTML for Java Rollover buttons). To PhotoImpact opens your modified component in PhotoImpact to allow you to further edit your image, while To Image Optimizer opens it in Image Optimizer, enabling you to further reduce its file size before putting it up on your Web page.

Note: In the case of Java Rollover buttons, there is an additional option, To HTML, which, when selected, opens the Save As dialog box for creating an HTML file to open your image in.

  What is Component Designer?

  The Component Designer Workspace

  Welcome to Component Designer


Component Designer workspace
The Component Designer Workspace

Click below to know more about each component and its workspace.

  What is Component Designer?

  Enabling Component Designer

  Welcome to Component Designer


Banner / Button dialog box

This is the main working area where you can customize your component by changing the text, color, and size, among others.

Viewing area Displays your selected component. Any changes made will be updated immediately.

Zoom tools These tools allow you to change magnification of your component.

Background color Click to change the background color of your workspace to further accentuate your component.

Attributes Displays a list of attributes whose settings you can readily change.

Size Adjust the dimension of your component, whether in percentage or in pixels, as shown in the working area. You may enter a value or drag the slider until you reach the desired size.

Shadow Allows you to apply shadow to your banner.

Text Enter your text and specify its attributes. Only single line text is allowed.

Color Specify a color for your object. Click the squares to change the previous color.

Back Goes back to the main page for selecting another category or component.

Export Opens your modified object in either PhotoImpact or the Image Optimizer.

  Back to the main workspace


Shadow Attributes

Shadow Select to apply shadow to your component.

Shadow color Specify a color for your shadow from the Ulead Color Picker.

Shadow position Choose a direction where you want the shadow to fall.

X-offset Enter a value or drag the slider to adjust the distance between the object and the shadow on the horizontal plane.

Y-offset Enter a value or drag the slider to adjust the distance between the object and the shadow on the vertical plane.

Tile angle Enter a value or drag the slider to adjust the angle at which the object's shadow slants.

Perspective Enter a value or drag the slider to adjust the slanting position of the shadow.

Transparency Enter a value or drag the slider to adjust the transparency level of the shadow. A high transparency setting allows more of the base image or any underlying objects to show through.

Soft edge Enter a value or drag the slider to adjust how smooth the edges blend with the background color or image.

Shadow size Enter a value or drag the slider to adjust the dimension of the shadow.


Text Attributes

Text Enter text here. If the Change shape when text changes item is selected, the dimension of the object changes accordingly. Otherwise, the object's size remains the same regardless of the length of your text.

Font Select a type of font from the list, which automatically displays a preview of how your text actually looks as you run your mouse down the list.

Style Select a character type style for your text.

Change shape when text changes Select to change the dimension of the object accordingly each time text is altered.


Color Attributes

Single color Fills the selected attribute with a solid color. Enter a color value or click the color square to open the Ulead Color Picker for selecting a color. Alternately, click the color cells to change the color directly.

Gradient color Fills the selected attribute with gradually changing colors.

Texture Fills the selected attribute with a texture file. Choose between Natural Texture and Magic Texture.


Gradient Color

Fill type Specify how you would like to apply gradient to the mask image. You may apply it with gradually changing colors starting from one point and extending along a straight line to another point or extending outward to the sides, whether rectangular or circular.

Two colors Creates a gradient fill between two colors.

Multiple colors Creates a gradient fill between several colors. Click the Fill colors to adjust the palette ramp of the gradient.

Ramp Determines how the colors change in a gradient fill.

RGB Follows the colors found in a straight line connecting the start and end colors in the RGB cube.

HSB Clockwise Follows the colors found in a continuous arc going clockwise around the HSB cone from the start to end color.

HSB Counterclockwise Follows the colors found in a continuous arc going counterclockwise around the HSB cone from the end to start color.


Texture Fill

Choose between Natural and Magic texture with which to fill an attribute of your component.

Thumbnails Displays all the available thumbnails in the Texture folder. Click one to fill your selected attribute with the texture.

More Clicking this button while in Natural Texture allows you to open a texture file. Clicking this button while in Magic Texture, however, opens the Magic Gradient dialog box for selecting a magic gradient.

  Magic Texture dialog box


Icon / Bullet / Separator dialog box

This is the main working area where you can customize your component by changing the text, color, and size, among others.

Viewing area Displays your selected component. Any changes made will be updated immediately.

Zoom tools These tools allow you to change magnification of your component.

Background color Click to change the background color of your workspace to further accentuate your component.

Attributes Displays a list of attributes whose settings you can readily change.

Size Adjust the dimension of your component, whether in percentage or in pixels, as shown in the working area. You may enter a value or drag the slider until you reach the desired size.

Shadow Allows you to apply shadow to your banner.

Color Specify a color for your object. Click the squares to change the previous color.

Back Goes back to the main page for selecting another category or component.

Export Opens your modified object in either PhotoImpact or the Image Optimizer.

  Back to the main workspace


Zoom in Increases the magnification of your image.
Zoom out Decreases the magnification of your image.
Show actual size Resizes your image to 1x (100 %) magnification.
Fit in window Resizes the current image to the largest magnification that will completely fit in a window.


Button Bar dialog box

Allows you to modify the attribute settings of button bars, which are a series of buttons arranged either horizontally or vertically. These buttons are normally used on Web pages as buttons for table of contents or for directories.

Option Allows you to enter text for your buttons and organize them in terms of layout, spacing and order.

Text Specify the font and style of your text.

Size Adjust the dimension of your component, whether in percentage or in pixels, as shown in the working area. You may enter a value or drag the slider until you reach the desired size.

Shadow Allows you to apply shadow to your banner.

  Back to the main workspace


Options
Button Bar Options

Add a new button Places a new button right below the selected one on the list. Simply type a desired text and click this button.

Set button text Replaces the current text on the selected button with a newly entered one.

Delete a button Removes a button from the button bar.

Move button up Moves the button up one level.

Move button down Moves the button down one level.

Same width for all buttons Select to make the size of all buttons the same despite a difference in the length of text.

Button spacing Specify the distance between buttons.

Layout Select to arrange your buttons in horizontal or vertical order.


Size

The following options are only available if Same width for all buttons is selected in the Options Tab:

Measured by button bar Select to evenly divide the total width into the number of buttons to determine the dimension of each component.

Measured by single button Select to adjust the dimension of each button individually.


Java Rollover Button dialog box

Options Specify settings for placing your Java Rollover button on the Web.

Same text for buttons Select to make the text on all buttons the same.

URL Enter the Internet address where you want your Java Rollover button to appear.

Target Specify the frame location.

Alt Specify a name to be displayed when you move your mouse over your Java Rollover button.

Size Adjust the dimension of your component, whether in percentage or in pixels, as shown in the working area. You may enter a value or drag the slider until you reach the desired size.

Preview Allows you to see how your button actually looks before putting it up on the Web.

  Back to the main workspace


Magic Texture dialog box

Select a texture to add to the image.

Sample tiles The center tile shows the currently selected texture. Click a bordering tile to shift the texture accordingly. Repeat this action until you find the texture you want.

Random Changes the center tile to another randomly selected texture.


Output Option dialog box

Output each button as a separate image file Select to save each of the buttons as an individual image file after optimizing them in Image Optimizer. Leave it cleared if you want to save the buttons as one single file.